<template>
  <div
    :class="[
      'analysis m-t-20',
      examPage === 'common' ? 'common-analysis' : '',
      isIncludes([1, 2], +questionData.type) ? 'm-b' : ''
    ]"
  >
    <div v-if="showAnswerText" class="m-b-16">
      <span class="f-400">
        正确答案：
        <span class="f-600">{{ answer }}</span>
      </span>
      &nbsp;
      <span class="f-400 m-l-100">
        你的答案：
        <span class="f-600">{{ userAnswer }}</span>
      </span>
    </div>
    <div>
      <div class="analy-item-title">答案解析</div>
      <div class="m-t-8" v-html="getAnalysis"></div>
    </div>

    <div class="m-t-16" v-if="isShowVideo">
      <video-analysis></video-analysis>
    </div>
    <div class="a-footer flex-center-wrap">
      <div
        class="flex-center a-btn"
        @click.stop="analysisPageChange({ page: 'comments' })"
      >
        讨论
      </div>
      <div
        class="flex-center a-btn m-l-20"
        @click.stop="analysisPageChange({ page: 'zl-dayi' })"
      >
        答疑
      </div>
      <div
        class="flex-center a-btn m-l-20"
        @click.stop="analysisPageChange({ page: 'exam-note' })"
      >
        做笔记
      </div>
    </div>
  </div>
</template>

<script>
import videoAnalysis from '@/components/exam/video_analysis.vue'
export default {
  name: 'cpa-analysis',
  components: {
    'video-analysis': videoAnalysis
  },
  props: {
    examPage: {
      type: String,
      default: ''
    },
    activeIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      page: ''
    }
  },
  computed: {
    // 是否显示
    showAnswerText() {
      let {
        activeIndex,
        questionData: { answer, type, options }
      } = this
      if ([1, 2].includes(+type)) {
        return true
      }

      if (+type === 4) {
        return false
      }
      // 综合题中 单选、多选情况，显示ABCD答案选项
      return (
        +type === 3 &&
        Array.isArray(options) &&
        this.isObject(options[activeIndex]) &&
        [1, 2].includes(+options[activeIndex].type)
      )
    },
    // 正确答案
    answer() {
      let {
        activeIndex,
        questionData: { answer, type }
      } = this

      if (+type === 3) {
        return this.getAnsStr(answer[activeIndex], 2)
      }
      return this.getAnsStr(answer, 2)
    },
    // 用户的答案
    userAnswer() {
      let {
        activeIndex,
        questionData: { userAnswer, type, options }
      } = this
      if (+type === 3) {
        let qType =
          this.isArray(options) &&
          this.isObject(options[activeIndex]) &&
          options[activeIndex].type
            ? options[activeIndex].type
            : 1
        return this.getAnsStr(userAnswer[activeIndex], 1, qType)
      }
      return this.getAnsStr(userAnswer, 1, type)
    },

    examQuestion() {
      return this.$store.state.exam.examQuestion || {}
    },
    // 获取解析
    getAnalysis() {
      let {
        activeIndex,
        questionData: { solution, type }
      } = this
      let str = ''
      if ([3].includes(+type)) {
        str = solution[activeIndex]
      } else {
        str = solution
      }
      return this.parseHtmlUrl(str)
    },
    isShowVideo() {
      let { videos } = this.questionData
      if (
        (this.isObject(videos) && videos.url) ||
        (this.isArray(videos) && videos.length > 0 && videos[0].url)
      ) {
        return true
      }
      return false
    },
    examModel() {
      return this.$store.state.exam.examModel
    },
    questionData() {
      return this.$store.state.exam.currentQuestion
    },
    //试题自身的做题模式
    questionModel() {
      return this.questionData.questionModel
    }
  },
  methods: {
    // 答案统一展示
    getAnsStr(row, defultType = 1, qType) {
      let type = this.getType(row)
      let result = row
      if (type === 'array') {
        result = row.filter(item => item).join(',')
      }

      if (type === 'string' && row.endsWith(',')) {
        // 如果以,结尾，去掉
        result = row.slice(0, -1)
      }
      let defultStr = defultType === 1 ? '未作答' : '未设置'
      if (+qType === 2 && typeof result === 'string') {
        // 对于不定项选择，答案需要按照字母asscii码排序
        result = result
          .split(',')
          .sort((a, b) => a.charCodeAt() - b.charCodeAt())
          .join(',')
      }
      return result || this.isIncludes([0, '0'], result) ? result : defultStr
    },
    // 打开讨论
    analysisPageChange(row) {
      this.$emit('analysisPageChange', row)
    },
    // 打开视频解析
    openVideoDialog() {
      let { videos } = this.questionData
      let type = this.getType(videos)
      let playUrl = ''
      if (type === 'object') {
        playUrl = videos.url || ''
      }
      if (type === 'array' && videos.length > 0) {
        playUrl = videos[0].url || ''
      }
      this.$emit('openVideoDialog', playUrl)
    }
  }
}
</script>

<style scoped>
.analysis {
  padding: 16px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #eeeeee;
}
.m-b {
  margin: 16px;
}
.analy-item-title {
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  color: #212429;
  line-height: 22px;
  position: relative;
  padding-left: 12px;
}
.analy-item-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #3480ff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.a-footer {
  cursor: pointer;
  border-top: 1px solid #eee;
  margin-top: 16px;
  padding-top: 16px;
}
.a-btn {
  width: 88px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #3480ff;
  font-size: 16px;
  font-weight: 500;
  color: #3480ff;
}

.common-analysis {
  background: #e1eef8;

  border: 1px solid #d1e0ea;
}

.common-analysis .a-footer {
  border-top: 1px solid #d1e0ea;
}
.m-l-100 {
  margin-left: 100px;
}
.m-b-16 {
  margin-bottom: 16px;
}
</style>
